Clipchamp'；影片編輯器 PWA 安裝量每月成長 97%

漸進式網頁應用程式、WebAssembly 和 ChromeOS 如何協助網頁版影片編輯器，為 1,200 萬名使用者提供更出色的效能和更吸引人的體驗。

Sören Balko
Sören Balko
GitHub LinkedIn

97%

PWA 安裝次數的每月成長情形

2.3 x

提升成效

9%

PWA 使用者的留存率提高

Clipchamp 是瀏覽器內建的線上影片編輯器，可讓任何人透過影片分享值得分享的故事。全球超過 1, 200 萬名創作者使用 Clipchamp 輕鬆編輯影片。我們提供簡單的影片製作解決方案，包括裁剪和修剪等直覺式工具，以及螢幕錄影器等實用功能，甚至還有迷因製作工具。

誰會使用 Clipchamp？

我們的使用者 (或稱日常編輯者) 非常多元。無需專業知識，就能成為 Clipchamp 的影片編輯師。具體來說，我們目前發現銷售、支援訓練和產品行銷團隊使用我們的網路攝影機和螢幕錄影功能，製作快速的說明內容，並加入文字和 GIF 圖片，讓內容更引人入勝。我們也發現許多小型商家會在移動中編輯及發布社群影片。

他們遇到哪些挑戰？

我們瞭解影片編輯一開始可能會讓人不知所措。我們假設你認為這項工作很困難，可能是因為先前使用複雜的編輯軟體時，曾經有過挫折的經驗。相較之下，Clipchamp 則著重於簡易性，提供文字疊加、庫存影片和音樂、範本等支援功能。

我們發現，大多數的一般編輯人員並沒有意圖製作電影傑作。我們經常與使用者交流，他們不斷提醒我們，他們很忙碌，只想盡可能快速且輕鬆地向全世界分享他們的故事，因此我們將這項目標視為重點。

開發 Clipchamp PWA

在 Clipchamp，我們致力於讓使用者透過影片說出自己的故事。為了實現這個願景，我們很快就意識到，允許使用者在製作影片專案時使用自己的影像片段，是相當重要的一點。

這項洞察讓 Clipchamp 的工程團隊必須想辦法開發出可在網路應用程式中有效處理千兆位元組級別媒體檔案的技術。考量到網路頻寬限制，我們很快就排除了傳統的雲端解決方案。透過零售網路連線上傳大型媒體檔案，在開始編輯前往往需要等待很長的時間，因此使用者體驗不佳。

因此，我們改用完全在瀏覽器內執行的解決方案，在當中，所有影片處理的「重擔」都會使用終端使用者裝置上可用的硬體資源，在本機執行。我們策略性地選擇 Chrome 瀏覽器，並透過 ChromeOS 平台，克服建構瀏覽器內影片創作平台時難免遇到的挑戰。

影片處理作業需要大量資源，因此會影響電腦和儲存空間資源。我們一開始是在 Google 的 (可攜式) 原生用戶端 (PNaCl) 上建構 Clipchamp 第一個版本。雖然 PNaCl 最終會逐步淘汰，但對我們的團隊來說，這項技術是絕佳的驗證工具，證明網頁應用程式可以在使用者硬體上執行，同時提供快速且低延遲的體驗。

後來改用 WebAssembly 時，我們很高興看到 Chrome 在整合後 MVP 功能方面處於領先地位，例如大量記憶體作業、執行緒，以及最近的固定寬度向量作業。工程團隊一直期待後者，因為這可讓我們改善影片處理堆疊，充分利用 SIMD 作業，這類作業在現代 CPU 上相當常見。我們善用 Chrome 的 WebAssembly SIMD 支援功能，加快了一些特別耗用資源的工作負載，例如 4K 影片解碼和影片編碼。

編碼器效能 (1080p，8.33 秒 @ 30 fps)。不使用 SIMD 的預設設定：25 秒。使用 SIMD 的預設設定：約 13 秒。不使用 SIMD 的壓縮預設值：約 83 秒。使用 SIMD 的壓縮預設值：約 33 秒。不使用 SIMD 的品質預設值 (新功能)：約 75 秒。使用 SIMD 的品質預設值：約 30 秒。

在沒有太多相關經驗的情況下，我們的一位工程師在不到一個月的時間內，就成功將效能提升 2.3 倍。雖然仍限於 Chrome 來源測試，但我們已能向大多數使用者推出這些 SIMD 增強功能。雖然使用者採用的硬體設定大相逕庭，我們仍能確認實際運作時的效能提升，且不會對失敗率造成任何不利影響。

我們最近整合了新推出的 WebCodecs API，目前可透過另一個 Chrome 來源試用功能使用。透過這項新功能，我們將可進一步改善許多熱門 Chromebook 的低規硬體在影片解碼方面的效能。

建立 PWA 後，請務必鼓勵使用者採用。和許多網頁應用程式一樣，我們著重於提供方便的存取方式，包括 Google 等社群平台的登入功能，讓使用者能快速進入編輯影片的頁面，然後輕鬆匯出影片。此外，我們還在工具列中宣傳 PWA 安裝提示，並在選單導覽中以彈出式通知的形式顯示。

結果

我們的可安裝 Chrome PWA 表現非常出色。我們很高興看到 PWA 使用者的留存率比標準電腦使用者高出 9%。PWA 的安裝量非常龐大，自五個月前推出以來，安裝量每月以 97% 的速度成長。如前所述，WebAssembly SIMD 增強功能可將效能提升 2.3 倍。

2020 年 6 月：約 1,000 次安裝。2020 年 7 月：約 5,000 次安裝。2020 年 8 月：約 12,000 次安裝。2020 年 9 月：安裝次數約 2 萬次。2020 年 10 月：約 3 萬次安裝。
過去 6 個月內的 Clipchamp PWA 安裝次數。

未來

我們對 PWA 的參與度和採用率感到驚喜。我們認為，由於 Clipchamp 使用者可以更輕鬆地安裝及存取 PWA，因此使用者留存率有所提升。我們也發現，在編輯器方面，PWA 的表現較佳，因此更能吸引使用者，讓他們持續回訪。

展望未來，我們很高興 ChromeOS 能讓更多使用者輕鬆完成更多工作。具體來說，我們很高興在處理檔案時，可以與本機作業系統整合一些方便的功能。我們認為這項功能有助於加快工作流程，讓忙碌的編輯人員能更有效率地處理工作，這也是我們最重視的目標之一。